<template>
  <div class="couponContent">
    <van-tabs title-active-color="#28b46a" :line-width="100" color="#28b46a" v-model="act" sticky>
      <van-tab title="未使用" class="tabContent">
        <p class="tip" v-if="list[0].items.length>0">温馨提示:使用邮政储蓄银行银行卡支付可享受优惠</p>
        <van-list
          v-model="list[0].loading"
          :finished="list[0].finished"
          :finished-text="list[0].items.length>0?'没有更多了~':''"
          @load="onLoad(0)"
        >
          <span v-for="(item,index) in list[0].items" :key="index">
            <!-- 满足使用条件 -->
            <div class="bg" v-if="price>=item.coupon.faceValue">
              <div class="coupon_item_all_info">
                <div class="coupon_info">
                  <p>
                    <span>￥{{item.coupon.discountValue}}</span>
                    <span>{{item.coupon.detail}}</span>
                  </p>
                  <div>
                    <!-- <p>无门槛使用</p> -->
                    <div>
                      <p>有效期至：{{item.endDate}}</p>
                      <span
                        v-if="moment(new Date()).add('days', 7).isAfter(moment(item.endDate))"
                        class="over_time"
                      ></span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="touse" @click="tochoise(item)">
                <span>立即使用</span>
              </div>
            </div>
            <!-- 不满足使用条件 -->
            <div class="bg cant_use" v-if="price<item.coupon.faceValue">
              <div class="coupon_item_all_info">
                <div class="coupon_info">
                  <p>
                    <span>￥{{item.coupon.discountValue}}</span>
                    <span>{{item.coupon.detail}}</span>
                  </p>
                  <div>
                    <!-- <p>无门槛使用</p> -->
                    <div>
                      <p>有效期至：{{item.endDate}}</p>
                      <span
                        v-if="moment(new Date()).add('days', 7).isAfter(moment(item.endDate))"
                        class="over_time"
                      ></span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="touse">
                <div>
                  <span></span>
                  <p>{{item.coupon.detail}}</p>
                </div>
              </div>
            </div>
          </span>
        </van-list>
        <div class="noDate" v-if="!list[0].loading&&list[0].items.length<=0">
          <img src="@/assets/images/nocoupon.png" alt />
          <p>您当前暂无满减权益</p>
          <router-link to="/">
            <span>前往积分兑权益</span>
          </router-link>
        </div>
      </van-tab>

      <van-tab title="已使用" class="tabContent">
        <p v-if="list[1].items.length>0" class="tip">温馨提示:使用邮储银行卡支付可享受优惠</p>
        <van-list
          v-model="list[1].loading"
          :finished="list[1].finished"
          :finished-text="list[1].items.length>0?'没有更多了~':''"
          @load="onLoad(1)"
        >
          <div v-for="(item,index) in list[1].items" :key="index" class="bg used">
            <div class="coupon_item_all_info">
              <div class="coupon_info">
                <p>
                  <span>￥{{item.coupon.discountValue}}</span>
                  <span>{{item.coupon.detail}}</span>
                </p>
                <div>
                  <!-- <p>无门槛使用</p> -->
                  <div>
                    <p>有效期至：{{item.endDate}}</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="touse"></div>
          </div>
        </van-list>
        <div class="noDate" v-if="!list[1].loading&&list[1].items.length<=0">
          <img src="@/assets/images/nocoupon.png" alt />
          <p>您当前暂无满减权益</p>
        </div>
      </van-tab>
      <van-tab title="已过期" class="tabContent">
        <p v-if="list[2].items.length>0" class="tip">温馨提示:使用邮储银行卡支付可享受优惠</p>
        <van-list
          v-model="list[2].loading"
          :finished="list[2].finished"
          :finished-text="list[2].items.length>0?'没有更多了~':''"
          @load="onLoad(2)"
        >
          <div v-for="(item,index) in list[2].items" :key="index" class="bg overTime">
            <div class="coupon_item_all_info">
              <div class="coupon_info">
                <p>
                  <span>￥{{item.coupon.discountValue}}</span>
                  <span>{{item.coupon.detail}}</span>
                </p>
                <div>
                  <!-- <p>无门槛使用</p> -->
                  <div>
                    <p>有效期至：{{item.endDate}}</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="touse"></div>
          </div>
        </van-list>
        <div class="noDate" v-if="!list[2].loading&&list[2].items.length<=0">
          <img src="@/assets/images/nocoupon.png" alt />
          <p>您当前暂无满减权益</p>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { List, Cell, Tab, Tabs, Dialog } from 'vant';
import moment from 'moment';
export default {
  components: {
    'van-list': List,
    'van-cell': Cell,
    'van-tabs': Tabs,
    'van-tab': Tab
  },
  data() {
    return {
      moment,
      act: 0,
      type: ['0', '1', '3'],
      list: [
        {
          items: [],
          refreshing: false,
          loading: false,
          error: false,
          finished: false,
          pageNum: 1,
          total: ''
        },
        {
          items: [],
          refreshing: false,
          loading: false,
          error: false,
          finished: false,
          pageNum: 1,
          total: ''
        },
        {
          items: [],
          refreshing: false,
          loading: false,
          error: false,
          finished: false,
          pageNum: 1,
          total: ''
        }
      ],
      price: 10000
    };
  },
  mounted() {
    this.$http.post('/tuser/userInfo', {}).then(res => {
      console.log(res);
      if (res.data.object.isAuth === '0') {
        Dialog.alert({
          title: '提示',
          message: '您还未实名认证',
          // cancelButtonText: '再看看',
          confirmButtonText: '去认证'
        }).then(() => {
          this.$router.replace('/real_name');
        });
        // .catch(() => {});
      } else {
        if (this.$route.query.price) {
          console.log(this.$route.query);
          this.price = this.$route.query.price;
        }
        document.getElementsByTagName('body')[0].style.overflow = 'hidden';
      }
    });
  },
  destroyed() {
    document.getElementsByTagName('body')[0].style.overflow = 'auto';
  },
  methods: {
    tochoise(item) {
      if (this.$route.query.toclick) {
        this.$route.query.toclick(item);
        this.$router.go(-1);
      } else {
        this.$router.push('/points');
      }
    },
    onLoad(index) {
      const list = this.list[index];
      setTimeout(() => {
        this.$http
          .post('/tuserCoupon/list', {
            isUse: this.type[this.act],
            pageNum: list.pageNum++
          })
          .then(res => {
            console.log(res);
            list.total = res.data.total;
            list.items.push(...res.data.list);
            list.loading = false;
            if (res.data.isLastPage) {
              list.finished = true;
            }
          });
      }, 500);
    }
  }
};
</script>

<style lang="scss" scoped>
.couponContent {
  position: absolute;
  background-color: white;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: scroll;
  .tabContent {
    padding: 30px;
    height: 100%;
    .tip {
      color: red;
      font-size: 28px;
    }
    .bg {
      width: 696px;
      height: 234px;
      background-image: url(../../assets/images/coupon_bg.png);
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .coupon_item_all_info {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-left: 30px;
        img {
          display: block;
          width: 150px;
          height: 150px;
          border-radius: 8px;
          background-color: red;
          margin-right: 20px;
        }
        .coupon_info {
          height: 150px;
          display: flex;
          align-items: flex-start;
          flex-direction: column;
          justify-content: space-between;
          p {
            span:nth-child(1) {
              color: red;
              font-size: 48px;
              padding-right: 15px;
            }
            span:nth-child(2) {
              font-size: 24px;
            }
          }
          div {
            position: relative;
            p {
              color: #868485;
              font-size: 24px;
            }
            .over_time {
              width: 98px;
              height: 40px;
              display: block;
              background-image: url(../../assets/images/will_overTime.png);
              background-size: 100% 100%;
              position: absolute;
              right: 0;
              top: -100%;
            }
          }
        }
      }
      .touse {
        // background-color: white;
        width: 190px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          // width: 140px;
          padding: 0 20px;
          line-height: 45px;
          height: 45px;
          border-radius: 22px;
          border: 1px solid white;
          color: white;
        }
      }
    }
    .cant_use {
      background-image: url(../../assets/images/grey_coupon_bg.png);
      .coupon_item_all_info .coupon_info p span:nth-child(1),
      .coupon_item_all_info .coupon_info p span:nth-child(2),
      .coupon_item_all_info .coupon_info div p {
        color: #c0bebe;
      }
      .touse {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        div {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          span {
            width: 26px;
            height: 26px;
            display: block;
            background-image: url(../../assets/images/mark.png);
            background-size: 100% 100%;
            border: none;
            padding: 0;
            border-radius: unset;
            margin-right: 5px;
          }
          p {
            color: red;
          }
        }
        p {
          color: red;
          font-size: 20px;
        }
      }
      .coupon_item_all_info .coupon_info div .over_time {
        filter: grayscale(100%);
        opacity: 0.4;
      }
    }
    .used {
      filter: grayscale(100%);
      opacity: 0.4;
      .touse {
        width: 179px;
        height: 135px;
        background-image: url(../../assets/images/used.png);
        background-size: 100% 100%;
        margin-right: 5px;
      }
    }
    .overTime {
      filter: grayscale(100%);
      opacity: 0.4;
      .touse {
        width: 179px;
        height: 135px;
        background-image: url(../../assets/images/overtime.png);
        background-size: 100% 100%;
        margin-right: 5px;
      }
    }
  }
}
.noDate {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  top: 375px;
  left: 50%;
  transform: translateX(-50%);
  img {
    width: 155px;
    height: 119px;
  }
  p {
    font-size: 36px;
    color: #868688;
    margin-top: 20px;
  }
  span {
    color: #28b46a;
    font-size: 30px;
    border: 1px solid #28b46a;
    border-radius: 8px;
    padding: 10px 15px;
    margin-top: 15px;
    display: block;
  }
}
</style>